// 封装一个通用的方法，用于实现数据懒加载
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

export const useLazyData = (apiFn) => {
  // 被监听的DOM元素
  const target = ref(null)
  // 接口获取的数据
  const result = ref([])
  // 监听DOM进入可视区
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    if (isIntersecting) {
      // 被监听的元素进入可视区之后才调用接口
      apiFn().then(data => {
        result.value = data.result
        // 获取数据之后停止继续监听
        stop()
      })
    }
  })
  return { target, result }
}
